<template>

    <div class="wrapper" ref="wrapper">
      <ul class="content">
        <li v-show="refresh">刷新ing</li>
        <li v-for="item in data" @click="showAnswer">{{item.title}}</li>
        <li v-show="more">
            loading
        </li>
      </ul>


      <myHeader title="面试题" />
      <myfoot />
    </div>

</template>

<script>
import myfoot from "@/components/footer"
import myHeader from "@/components/headerTop"
import {getExact} from "@/API"
import BScroll from 'better-scroll'
export default {
  name: 'HelloWorld',
  data () {
    return {
      data:[],
      page:1,
      refresh:false,
      more:false
    }
  },
  components: {
    myfoot,myHeader
  },
	created() {

		getExact(this.page).then((response) => {
			// console.log(response.data.dataList)
			this.data=response.dataList
        this.$nextTick(() => {
          if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.wrapper, {click:true,probeType: 1 })
                console.log(this.scroll)

                this.scroll.on('scroll', (pos) => {
                  // 下拉动作
                  console.log(pos)
//上拉极限值
console.log(this.scroll.maxScrollY)
                  if (pos.y > 50) {
                    console.log("ssss")
                    this.refresh=true;
                    this.refreshData()
                  }

                  // 上拉的动作
                  if (pos.y < this.scroll.maxScrollY+30&&this.more==false) {
                    console.log("ssss")
                    this.more=true;
                    this.getData(++this.page)

                  }
                })
              } else {
                this.scroll.refresh()
              }
        })

		})
	},
	methods:{
    refreshData(){
      getExact(1).then((response)=>{
        this.data=response.dataList
        this.refresh=false
      } )
    },
      getData(page){
        getExact(page).then((response)=>{
          this.data=this.data.concat(response.dataList)
          this.more=false
        } )
      },
      showAnswer(){
        console.log("as")
      }
	},


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

.wrapper{
    width: 100vw;
    height: 600px;
    top:10px;
    overflow: hidden;
    position: relative;
    li{
      height: 100px;
    }
}

</style>
